<template>
  <el-container direction="vertical">
    <!-- <SearchForm :columns="formColumn" @search="search" @reset="search" /> -->
    
     <div class="search-box p-flex p-ai-c p-jc-sb">
      <div class="p-flex p-ai-c">
        <div class="item p-flex p-ai-c">
          <div class="title">美妆顾问：</div>
          <div class="inp">
            <div>
              <el-input placeholder='请输入' v-model="searchState.name"></el-input>
            </div>
          </div>
        </div>
        <div class="item p-flex p-ai-c">
          <div class="title">片区：</div>
          <div class="inp">
            <div>
              <el-select v-model="searchState.school1" placeholder="请选择" @change="optionChange" size="large">
                <el-option
                  v-for="item in areaOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div class="item p-flex p-ai-c">
          <div class="title">校区：</div>
          <div class="inp">
            <div>
              <el-select v-model="searchState.school2" placeholder="请选择" size="large">
                <el-option
                  v-for="item in schoolOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
				<el-button :icon="Delete" @click="handleReset">重置</el-button>
      </div>
     </div>
    <div
      class="scTable"
      :style="'height: 100%;'"
      v-loading="loading"
    >
      <div class="scTable-table">
        <el-table :data="tableData" :size="tableSize" style="width: 100%" :border="tableBorder" :stripe="tableStripe" height="100%">
          <el-table-column v-for="(item, index) in cloumn" :key="index" :fixed="item.fixed" :label="item.label" align="center">
            <el-table-column v-for="(item2, index2) in item.children" :key="index2" :label="item2.label" align="center">
              <el-table-column  v-for="(item3, index3) in item2.children" :key="index3" :label="item3.label" :align="item3.align ? item3.align : 'center'">
                <el-table-column v-for="(item4, index4) in item3.children" :key="index4" :prop="item4.prop" align="center"
                  :label="item4.label" :width="item4.width">
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="scTable-page">
        <div class="scTable-pagination">
          <el-pagination
            background
            :small="true"
            :layout="paginationLayout"
            :total="tableData.length"
            :page-size="scPageSize"
            :page-sizes="pageSizes"
            v-model:currentPage="currentPage"
            @current-change="paginationChange"
            @update:page-size="pageSizeChange"
          ></el-pagination>
        </div>
        <div class="scTable-do">
          <el-button
            @click="refresh"
            icon="el-icon-refresh"
            circle
            style="margin-left: 15px"
          ></el-button>
          <el-popover
            placement="top"
            title="表格设置"
            :width="400"
            trigger="click"
            :hide-after="0"
          >
            <template #reference>
              <el-button
                icon="el-icon-setting"
                circle
                style="margin-left: 15px"
              ></el-button>
            </template>
            <el-form label-width="80px" label-position="left">
              <el-form-item label="表格尺寸">
                <el-radio-group
                  v-model="tableSize"
                  size="small"
                  @change="configSizeChange"
                >
                  <el-radio-button label="large"
                    >大</el-radio-button
                  >
                  <el-radio-button label="default"
                    >正常</el-radio-button
                  >
                  <el-radio-button label="small"
                    >小</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="样式">
                <el-checkbox
                  v-model="tableBorder"
                  label="纵向边框"
                ></el-checkbox>
                <el-checkbox
                  v-model="tableStripe"
                  label="斑马纹"
                ></el-checkbox>
              </el-form-item>
            </el-form>
          </el-popover>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script setup>
// import SearchForm from "@/components/SearchForm/index.vue";
import { reactive, ref, computed, getCurrentInstance } from "vue";
import { formColumn, cloumn } from "./data";
import config from "@/config/table";
import { Search, Delete } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance()
const paginationLayout = config.paginationLayout
const currentPage = ref(1)
const scPageSize = config.pageSize
const pageSizes = config.pageSizes
const loading = ref(false)
const tableSize = ref("default")
const tableStripe = ref(true)
const tableBorder = ref(true)
const tableData = reactive([
  {school: "jhasd", name: "123"}
])

const searchState = reactive({
  name: "",
  school1: "",
  school2: ""
})

const areaOptions = reactive([
  {value: "片区1", label: "片区1"},
  {value: "片区2", label: "片区2"},
])

const optionChange = (val) => {
  searchState.school2 = ""
}

const schoolOption = computed(() => {
  if (searchState.school1 === '片区1') {
    return [
      {value: "校区1", label: "校区1"},
    ]
  }else if(searchState.school1 === '片区2') {
    return [
      {value: "校区2", label: "校区2"},
    ]
  }else{
    return []
  }
})

const handleReset = () => {
  search()
}

const search = (searchParams) => {
  // proxy.$API.
	const params = Object.assign({}, {}, searchParams);
	// 去掉空值
	for (let key in params) {
		if (params[key] === undefined || params[key] === null || params[key] === "") {
			delete params[key];
		}
	}
}

const paginationChange = (val) => {
  console.log(val);
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
const pageSizeChange = (val) => {
  console.log(val);
}

// 刷新
const refresh = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
const configSizeChange = (val) => {
  console.log(val);
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

// const _height = computed(() => {
//   return Number(this.height)
//     ? Number(this.height) + "px"
//     : this.height;
// })

// const _table_height = computed(() => {
//   return this.hidePagination && this.hideDo
//     ? "100%"
//     : "calc(100% - 50px)";
// })
</script>

<style scoped lang="scss">
.search-box {
  background-color: #fff;
  padding: 18px 18px;
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;

  .item {
    margin-right: 20px;
    ::v-deep .el-input__wrapper{
      height: 30px;
      line-height: 30px;
      min-width: 226px;
    }
  }
}

.scTable-table {
	height: calc(100% - 50px);

  ::v-deep .el-table__header {
    thead {
      tr th {
        .cell {
          padding: 0;
        }
      }
    }
  }
}
.scTable:deep(.el-table__footer) .cell {
	font-weight: bold;
}
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
	height: 12px;
	border-radius: 12px;
}
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
	width: 12px;
	border-radius: 12px;
}
.scTable-page {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
}
</style>